<template>
  <section class="announcements" v-if="items.length > 0">
    <div class="section-header">
      <h2>系统公告</h2>
      <button class="more-btn" @click="handleMore">更多 →</button>
    </div>
    <div class="announcement-list">
      <div 
        class="announcement-item" 
        v-for="item in items" 
        :key="item.id"
        @click="handleClick(item)"
      >
        <span class="announcement-tag" :class="item.type">{{ item.typeLabel }}</span>
        <span class="announcement-title">{{ item.title }}</span>
        <span class="announcement-date">{{ item.date }}</span>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const emit = defineEmits(['click', 'more'])

// 公告列表（TODO: 需要从API获取）
const items = ref([
  { id: 1, type: 'update', typeLabel: '更新', title: '系统已升级至v2.5版本，新增智能预测功能', date: '12-05' },
  { id: 2, type: 'notice', typeLabel: '通知', title: '12月份数据维护计划公告', date: '12-03' },
  { id: 3, type: 'warning', typeLabel: '预警', title: '松花江流域近期可能出现汛情', date: '12-01' },
])

// 加载公告（TODO: 实现API调用）
async function loadAnnouncements() {
  // TODO: 调用API获取公告列表
  // const data = await getAnnouncements()
  // items.value = data
}

function handleClick(item) {
  emit('click', item)
}

function handleMore() {
  emit('more')
}

onMounted(() => {
  loadAnnouncements()
})
</script>

<style scoped>
.announcements {
  width: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}

.more-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;
}

.more-btn:hover {
  color: #00d4ff;
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.announcement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transition: all 0.2s;
  cursor: pointer;
}

.announcement-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.announcement-tag {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.announcement-tag.update {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.announcement-tag.notice {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.announcement-tag.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.announcement-title {
  flex: 1;
  font-size: 14px;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-date {
  font-size: 13px;
  color: #64748b;
  flex-shrink: 0;
}
</style>

